<template>
	<view class="withdrawal">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="提现" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="card flex_center">
			<view class="card_item">
				<text>可提现(元)</text>
				<view>{{current_bill}}</view>
			</view>
			<view class="card_item" v-if="auth == 1">
				<text>待提现(元)</text>
				<view>{{all_bill}}</view>
			</view>
		</view>

		<view class="content">
			<view class="header flex_r_between">
				<text>提现至</text>
				<view @click="$util.toUrl('/pages/store/income/account')" v-if="havaAccount">支付宝账户:{{name}}</view>
				<view @click="$util.toUrl('/pages/store/income/account')" v-else>
					点击添加收款账号
				</view>
			</view>

			<view class="inp flex_center">
				<text>¥</text>
				<input type="text" :placeholder="`可提现${current_bill}元`" placeholder-class="placeholder-class"
					v-model="money" />
				<view @click="money = current_bill">全部提现</view>
			</view>
		</view>

		<view class="btn" @click="onSubmit">提现</view>

		<u-modal :show="showmodal" title="申请成功" content='请耐心等待审核' confirmText="我知道了" @confirm="back"></u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				auth: 3,

				current_bill: '0.00',
				all_bill: '0.00',

				money: '',

				name: '',
				account: '',

				havaAccount: false,

				showmodal: false,
				
				circle_id: 0,
			}
		},
		methods: {
			getData() {
				this.$get('/guild_data/getIncomeData', {
					auth: this.auth,
					circle_id: this.circle_id,
				}).then(res => {
					this.current_bill = Number(res.data.current_bill).toFixed(2);
					if (this.auth == 1) {
						this.all_bill = Number(res.data.all_bill).toFixed(2);
					}
				})
			},

			onSubmit() {
				if (!this.money) {
					return this.$util.msg('请输入提现金额');
				}

				if (!this.havaAccount) {
					return this.$util.msg('请添加收款账户');
				}

				this.$post('/guild_balance/withdrawal', {
					price: this.money,
					withdrawal_type: this.auth == 1 ? 1 : 2,
					auth: this.auth,
					name: this.name,
					circle_id: this.circle_id,
					account: this.account,
				}).then(res => {
					this.showmodal = true;
				})
			},

			getAccount() {
				this.$post('/user_withdrawal/getWithdrawalAccount',{
					circle_id: this.circle_id,
				}).then(res => {
					if (res.data.account == null) {
						this.havaAccount = false;
					} else {
						this.havaAccount = true;
						this.account = res.data.account;
						this.name = res.data.name;
					}
				})
			},

			back() {
				this.havaAccount = false;
				this.$util.back();
			}
		},


		onLoad(option) {
			this.auth = option.auth;
			this.circle_id = option.circle_id;
			this.getData();
		},
		onShow() {
			this.getAccount();
		},
	}
</script>

<style lang="less" scoped>
	.withdrawal {
		padding: 20rpx 32rpx 72rpx;
	}

	.card {
		height: 104px;
		background: linear-gradient(41deg, #E470FF 0%, #F3D7FF 100%), linear-gradient(41deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.62) 100%);
		box-shadow: inset 0px -4px 0px 0px #EA9FFF;
		border-radius: 16px;
		padding: 0 24rpx;

		.card_item {
			flex: 1;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}

			view {
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}
	}

	.content {
		height: 248rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 32rpx;

		.header {

			text {
				font-size: 28rpx;
				color: #131313;
			}

			view {
				font-size: 28rpx;
				color: #131313;
			}

		}

		.inp {
			margin-top: 64rpx;

			text {
				font-size: 56rpx;
				color: #131313;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				margin: 0 10rpx;
			}

			.placeholder-class {
				font-size: 28rpx;
				color: #999999;
			}

			view {
				font-weight: 500;
				font-size: 28rpx;
				color: #117ECB;
			}
		}

	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		background: #6B37E2;
		border-radius: 50rpx;

		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;

		position: fixed;
		bottom: 70rpx;
	}
</style>